
<div class="bjui-pageContent">
	<ul id="device-info" class="nav nav-tabs">
	   <li class="active"><a href="#raw-data" data-toggle="tab">原始数据</a>

	   </li>

	   <li><a href="#ktv-data" data-toggle="tab">私有协议数据</a></li>
	</ul>
	<div id="device-info-content" class="tab-content" style="height: 92%;">
	   <div class="tab-pane fade in active" id="raw-data">
	  <div class="container-main">
	   <div id="container-left" style="width: 722px;height: 100%;margin-left: -5px; float:left; background-color: #f5f5f5;"></div>
	   <div id="container-right" style="width:50%; height: 100%;margin-left:2px; float:left; background-color: #f5f5f5;">
        <p>ASCII</p>
	   </div>
  	</div>	
	   </div>
	   <div class="tab-pane fade"  id="ktv-data">
			<div class="example table-responsive">
	            <table class="table">
	                <thead>
	                <tr class="ktv-data">
	                    <th style="background-color: #eee"><b>key值</b></th>
	                    <th style="background-color: #eee"><b>类型</b></th>
	                    <th style="background-color: #eee"><b>数值</b></th>
	                    <th style="background-color: #eee"><b>单位</b></th>
	                </tr>
	                </thead>
	                <tbody>
	                	{{#each privatedata}}
	                	 <tr class="ktv-data">
	                        <td>{{k}}</td>
	                        <td>{{kName}}</td>
	                        <td>{{v}}</td>
	                        <td>{{tType}}</td>
	                    </tr>
	                	{{/each}}
	                </tbody>
	            </table>
	        </div>
	   </div>
	</div>
</div>
<script type="text/javascript">
	$(function(){
		var data='{{metadata}}';
	    var tdh='0123456789ABCDEF';
	       
           var tb = "<TABLE class='tableMetadata'>"+"<th class='th'>"+" "+"</th>"+
           "<th class='th'>"+"00"+"</th>"+
           "<th class='th'>"+"01"+"</th>"+"<th class='th'>"+"02"+"</th>"+
           "<th class='th'>"+"03"+"</th>"+"<th class='th'>"+"04"+"</th>"+
           "<th class='th'>"+"05"+"</th>"+"<th class='th'>"+"06"+"</th>"+
           "<th class='th'>"+"07"+"</th>"+"<th class='th'>"+"08"+"</th>"+
           "<th class='th'>"+"09"+"</th>"+"<th class='th'>"+"10"+"</th>"+
           "<th class='th'>"+"0A"+"</th>"+"<th class='th'>"+"0B"+"</th>"+
           "<th class='th'>"+"0C"+"</th>"+"<th class='th'>"+"0E"+"</th>"+
           "<th class='th'>"+"0F"+"</th>";
           
      for(var i =0; i<(data.length)/32; i++) { //行
     	 
           var dataStr=data.substr(i*32,32);
			    var td = "";
         
           for(var j=0;j<dataStr.length;j+=2){//列

			      td = td + "<td class='td'>" + dataStr.substr(j,2) + "</td>";//每个单元里显示的数据
			   }
			     if (i<16) {
			     	 tb = tb +"<tr>"+"<td style='border:1px solid #ddd;padding:10px;'>"+"00"+tdh.substr(i,1)+"0"+"</td>" + td + "</tr>";
			     	} else{
			     	tb = tb +"<tr>"+"<td style='border:1px solid #ddd;padding:10px;'>"+"0"+parseInt(i/15)+tdh.substr(i%16,1)+"0"+"</td>" + td + "</tr>";	
			     	}
            }
			     tb = tb + "</TABLE>";
			$('#container-left').append(tb);


        var trAscii="<TABLE class='tableAscii'>";
       for(var i =0; i<(data.length)/32; i++) {
     	
           var dataStr=data.substr(i*32,32);
			    var td = "";
           for(var j=0;j<dataStr.length;j+=2){
		
		     var uni="0x"+dataStr.substr(j,2);
			 var charValue = String.fromCharCode(uni);
			      td = td + "<td class='tdAscii'>" + charValue + "</td>";
			}
			      trAscii = trAscii +"<tr>"+ td + "</tr>";
         }
			     trAscii = trAscii + "</TABLE>";
			$('#container-right').append(trAscii);
       });
	
</script>

